<template>
  <el-dialog
    v-model="isDialogShow"
    :title="dialogTitle"
    :width="800"
    close-on-click-modal="false"
    destroy-on-close
  >
    <el-form
      ref="userFormRef"
      :model="userForm"
      :rules="formRules"
      label-width="120px"
      size="default"
    >
      <el-row :gutter="20">
        <!-- 登录账号 -->
        <el-col :span="12">
          <el-form-item label="登录账号" prop="username">
            <el-input v-model="userForm.username" placeholder="请输入登录账号" max-length="50" />
          </el-form-item>
        </el-col>

        <!-- 姓名 -->
        <el-col :span="12">
          <el-form-item label="姓名" prop="realName">
            <el-input v-model="userForm.realName" placeholder="请输入姓名" max-length="20" />
          </el-form-item>
        </el-col>

        <!-- 角色类型 -->
        <el-col :span="12">
          <el-form-item label="角色类型" prop="roleType">
            <el-select v-model="userForm.roleType" placeholder="请选择角色类型" @change="clearRoleName">
              <el-option label="系统用户" value="system" />
              <el-option label="非系统用户" value="non-system" />
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 角色名称 -->
        <el-col :span="12">
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="userForm.roleName" placeholder="请输入角色名称" max-length="30" />
          </el-form-item>
        </el-col>

        <!-- 出生日期 -->
        <el-col :span="12">
          <el-form-item label="出生日期" prop="birthDate">
            <el-date-picker v-model="userForm.birthDate" type="datetime" placeholder="请选择出生日期" value-format="YYYY-MM-DD HH:mm:ss" />
          </el-form-item>
        </el-col>

        <!-- 性别 -->
        <el-col :span="12">
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="userForm.gender">
              <el-radio label="male">男</el-radio>
              <el-radio label="female">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <!-- 状态 -->
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="userForm.status">
              <el-radio label="normal">正常</el-radio>
              <el-radio label="disabled">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <!-- 手机号 -->
        <el-col :span="12">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="userForm.phone" placeholder="请输入手机号" max-length="11" />
          </el-form-item>
        </el-col>

        <!-- 邮箱 -->
        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="userForm.email" placeholder="请输入邮箱" max-length="50" />
          </el-form-item>
        </el-col>

        <!-- 组织机构 -->
        <el-col :span="12">
          <el-form-item label="组织机构" prop="organization">
            <el-select v-model="userForm.organization" placeholder="请选择组织机构">
              <el-option label="大学" value="university" />
              <el-option label="中学" value="middle-school" />
              <el-option label="小学" value="primary-school" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElForm, ElMessage } from 'element-plus';

interface UserFormData {
  username: string;
  realName: string;
  roleType: string;
  roleName: string;
  birthDate: string;
  gender: 'male' | 'female';
  status: 'normal' | 'disabled';
  phone?: string;
  email?: string;
  organization?: string;
}

const props = defineProps<{
  isEdit: boolean;
  initData?: UserFormData;
}>();

const emit = defineEmits<{
  (e: 'close'): void;
  (e: 'submit', data: UserFormData): void;
}>();

const userFormRef = ref<InstanceType<typeof ElForm>>();
const isDialogShow = ref(false);
const dialogTitle = ref(props.isEdit ? '编辑用户' : '新增用户');

const userForm = reactive<UserFormData>({
  username: '',
  realName: '',
  roleType: '',
  roleName: '',
  birthDate: '',
  gender: 'male',
  status: 'normal',
  phone: '',
  email: '',
  organization: ''
});

const formRules = reactive({
  username: [
    { required: true, message: '请输入登录账号', trigger: ['blur', 'change'] 